<template>
  <div class="department">
      <van-tree-select
          v-model:active-id="activeId"
          v-model:main-active-index="activeIndex"
          style="width: 100%;height:100%"
          selected-icon="success"
          :items="items"
          @click-item='onItemClick'
      >
      </van-tree-select>

  </div>

</template>

<script>
import { useRouter } from "vue-router";
import { ref, reactive, toRefs } from "vue";
import axios from "axios";
export default {
  name: "department",
  data() {
    return {
      active:1,
      // list:[],
    };
  },
  setup() {
    //在控制台返回各科室的信息
    // const options = {
    //   method: 'POST',
    //   url: 'http://106.54.189.155:6768/department/findDepartmentList',
    // };
    // axios.request(options).then(response=> {
    //   this.list=response.data.data;
    //   console.log(response.data);
    // }).catch(function (error) {
    //   console.error(error);
    // });

    const activeId = ref(1);
    const activeIndex = ref(0);
    const items = [
      {
        text: '骨科',
        children: [
          { text: '科室一', id: 1 },
          { text: '科室二', id: 2 },
          { text: '科室三', id: 3 },
          { text: '科室四', id: 4 },
        ],
      },
      {
        text: '牙科',
        children: [
          { text: '科室一', id: 5 },
          { text: '科室二', id: 6 },
          { text: '科室三', id: 7 },
          { text: '科室四', id: 8 },
        ],
      },
      {
        text: '皮肤科',
        children: [
          { text: '科室一', id: 9 },
          { text: '科室二', id: 8 },
        ],
      },
      {
        text: '脑科',
        children: [
          { text: '科室一', id: 9 },
          { text: '科室二', id: 10 },
        ],
      },

    ];

    const router = useRouter();

    function onItemClick(data) {
      console.log(data);
      //使用router传参,将患者预约时选择的科室ID传到describe页面
      // router.push({path:'/home/consultation/releaseRequirets/describe'})
      router.push({name:'describe',params:{id:data.id}})
    }
    return {
      items,
      activeId,
      activeIndex,
      // ...toRefs(data),
      onItemClick,
    };
  },



};
</script>

<style lang="scss" scope>
.department {
  width: 100%;
  height:100%;
  margin-bottom: 200px;
  display: flex;
}
</style>
